<template>
	<view class="order">
		<!-- 空订单状态 -->
		<view class="empty" v-if="order_list.length===0">
			<u-empty text="订单为空" mode="order"></u-empty>
		</view>
		<!-- 订单列表 -->
		<view class="sea" v-if="order_list.length!=0">
			<u-search placeholder="请输入订单编号" @change="seaorder()" v-model="kw" bgColor="#ffffff" shape='square' :showAction='false'></u-search>
		</view>
		<view class="order_list" v-for="(item,i) in order_list" :key='i'>
			<view class="group">
				<u-cell-group>
					<u-cell title="车牌号" :value="item.car_number"></u-cell>
					<u-cell title="订单编号" :value="item.order_number"></u-cell>
					<u-cell title="提交金额" :value="item.money+'元' "></u-cell>
					<u-cell title="备注" :value="item.order_type"></u-cell>
					<u-cell title="收款方" value="智多慧有限公司"></u-cell>
					<u-cell title="提交时间" :value="item.money_sub_time"></u-cell>
				</u-cell-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_list: [], //订单列表
				car_number: '0', //车牌号
				page: 1, //当前页数
				num: 3, //每页返回的数据量,默认每页10条数据
				countpage:1,//总的页数
				kw: '',//关键词搜索
				timer: null, // 延时器的 timerId
				isloading:false,//节流伐,解决频繁滑动多次请求数据问题
			};
		},
		mounted() {
			this.car_number = uni.getStorageSync('car_number'); //获取本地储存的车牌号
			setTimeout(() => {
				this.getorderlist() //获取订单列表
			}, 10)

		},
		methods: {
			async getorderlist(cb) {
				this.isloading=true //开启节流阀
				const {
					data: res
				} = await uni.$http.get('/order/car/get', {
					'car_number': this.car_number,
					'page': this.page,
					'num': this.num,
					'order_number':this.kw
				})
				if (res.code === 200) {
					// 展开运算符拼接
					this.order_list = [...this.order_list,...res.data]
					this.countpage=res.count //添加总页数
					this.isloading=false //关闭节流阀
					cb && cb() //如果 cb 存在（非空），则执行 cb 函数，用于关闭下拉加载刷新
				} else{
					cb && cb()
					this.isloading=false //关闭节流阀
				}
			},
			// 订单编号搜索
			async ordernumbersea(){
				const {
					data: res
				} = await uni.$http.get('/order/car/get', {
					'car_number': this.car_number,
					'order_number':this.kw
				})
				if (res.code === 200) {
					this.order_list = res.data
					this.countpage=res.count //添加总页数
				} 
			},
			// 防抖
			async seaorder(){
			// 清除 timer 对应的延时器,防抖
			clearTimeout(this.timer)
			// 重新启动一个延时器，并把 timerId 赋值给 this.timer
			this.timer = setTimeout(() => {
				this.ordernumbersea()
			}, 500)
			}
		},
		
		// 下拉滚动，onReachBottom 是 Uni-App 框架提供的特定生命周期函数，用于监听页面滚动到页面底部的事件
		onReachBottom(){
			// 当页码数大于等于总页码数时就不会再继续调用执行
			if (this.page>=this.countpage) return
			if (this.isloading===true) return
			// 让页码值自增加一
			this.page++
			this.getorderlist()
		},
		// 下拉刷新
		onPullDownRefresh(){
			// 重置关键数据
			this.isloading=false
			this.countpage=1,
			this.order_list=[]
			this.page=1
			this.kw=''
			// 重新获取数据，()=>uni.stopPullDownRefresh()是一个回调函数,作用是获取成功后关闭下拉刷新加载
			this.getorderlist(()=>uni.stopPullDownRefresh())
		},
	}
</script>

<style lang="scss">
	.order {
		width: 100%;
		background-color: rgb(240, 240, 240);
		// overflow: auto;
		.sea{
			margin-bottom: 10px;
			box-sizing: border-box;
			background-color: #ffffff;
		}
		.group {
			box-sizing: border-box !important;
			margin-top: 10px;
			background-color: #ffffff !important;
		}
		
		.empty {
			margin-top: 50%;
			width: 100%;
			height: 100vh;
			background-color: #ffffff;
		}
	}

	.u-search{
		height: 50px !important;
	}
</style>